<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <button @click="revArr">翻转数组</button>
    <button @click="sliArr">截取数组</button>
    <button @click="updateVal">更新值</button>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6],
    };
  },
  methods: {
    revArr() {
      // 会修改原数组
      this.arr.reverse();
    },
    sliArr() {
      // 不会修改原数组
      // this.arr.slice(0,3)
      // 返回值是新的数组,截取后的数组
      // 将返回值重新赋值给this.arr即可更新
      this.arr=this.arr.slice(0, 3);
    },
    updateVal() {
      // 将第一个元素修改为10
      // 注意:直接通过索引进行赋值，不会进行页面更新
      // this.arr[0]=10
      // Vue 提供了一个方法来帮助我们实现这个功能
      // this.$set()
      // 参数1:要修改的数据对象,数组
      // 参数2:要修改的键,索引号
      // 参数3:要修改的值
      this.$set(this.arr, 0, 10);
    },
  },
};
</script>

<style>
</style>
